<template>
<div class="content">
    <span style="float: left;position: relative;top: 0.3125rem;">筛选查询</span>
    <div class="top">
      <span>项目</span>
      <el-select size="small" v-model="option.projectName" clearable  placeholder="全部">
        <el-option v-for="item in options.projectName" :key="item.projectName" :label="item.projectName" :value="item.projectName">
        </el-option>
      </el-select>
    </div>
    <div class="top">
      <span>登记时间</span>
      <el-date-picker size="small" v-model="option.defectCreattime" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="top_button">
      <el-button @click="flush()" size="small">刷新</el-button>
      <el-button type="primary" name="but-insert" id="but-insert" @click="selectProption(options)" size="small">搜索
      </el-button>
      <el-button type="danger" name="but-delete" id="but-delete" @click="exportTo()" size="small">导出</el-button>
    </div>
      <div id="main" style="height: 800px;width: 800px;">

      </div>


  </div>


</template>

<script>
  import * as echarts from 'echarts';
  export default{
    name:'Defectstaterate',
    data() {
      return {

        options: {
           value1: [],
          projectName:[]
        },
        option:{
          defectCreattime: [],
          projectName:''
        },
        Proption: {
          name:[],
          value:[]
        },



        chartPie: null
      }
    },
    methods: {
      //刷新整个页面
      flush(){
          location.reload()
         },

      findAllprojectname() {
        this.$axios.post("/project/getAllProjectName").then(resp => {
          this.options.projectName = resp.data.data

        })
      },
      selectProption() {

        JSON.stringify(this.option)


        this.$axios.post("/StatisticAlanalysis/SelectAllDefectstate", this.option).then(resp => {

          console.log(resp.data.data)
            var arr=[]
            var brr=[]
            for(var i=0;i<resp.data.data.length;i++){
             arr.push(resp.data.data[i].name)
              brr.push(resp.data.data[i].value)
           }
           this.Proption.name=arr
           this.Proption.value=brr
          console.log(this.Proption)
          this.pipe()
        })
      },

      pipe() {

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        var option = {
          title: {
            text: '缺陷状态统计',
            
            left: 'center'
          },
          xAxis: {
             type: 'category',
             data: this.Proption.name
           },
           yAxis: {
             type: 'value'
           },
           series: [
             {
               data:this.Proption.value,
               type: 'bar'
             }
           ]

          }
        myChart.setOption(option);
      },

      exportTo(){
      // 获取echarts数据
         var cityData = this.Proption.data
         // excel表头

         var tHead = ['缺陷状态', '状态个数']
         // excel表体
         var tData = [];
         // excel文件名
         var tName = `缺陷状态表`
         // 循环添加excel表体, key需跟表头对应
           cityData.forEach(item => {
                tData.push({
                  '缺陷状态': item.name,

                  '状态个数': item.value
                })
               });

         // 导出
         this.exportDataExcel(tHead, tData, tName)
      }


    },
    created() {
      this.findAllprojectname()
      this.selectProption()
    }

    }
</script>

<style>
.top {
    position: relative;
    float: left;
    left: 3%;
    /* margin-left: 1.25rem; */
  }

  .time {
    text-align: left;
  }

  .top_button {
    position: relative;
    float: right;
    right: 3%;
  }
  #main{
    position: relative;
    top: 100px;
  }
</style>
